/**
 * MyBooksList
 * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#mybooks-list
 * Used in:
 * - openlibrary/templates/account/books.html
 * - openlibrary/templates/stats/readinglog.html
 *
 * http://localhost:8080/account/books/currently-reading
 * http://localhost:8080/stats/readinglog
 */

@import (less) "components/searchResultItemCta.less";
@import (less) "components/search-result-item.less";
.mybooks-list {
  ul {
    margin: 0 !important;
  }
  h2 {
    padding: 5px 0;
    margin: 0;
    line-height: 1.5em;
    margin-bottom: 5px;

    &.subtitle {
      font-weight: normal;
    }
  }

  h4.work-subtitle {
    font-family: @georgia_serif-1;
    color: @grey;
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
  }

  .loadmore {
    text-align: center;
  }

  .yearly-goal-section {
    margin-bottom: 28px;
  }

  overflow-wrap: anywhere;
}

.mybooks-list--clean {
  ul {
    display: flex;
    margin: 0;
    flex-wrap: wrap;

  }
  h3 {
    display: inline;
    padding-right: 10px;
    font-family: @lucida_sans_serif-1;
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 0;
  }
  li {
    width: 310px;
    margin-right: 10px;
  }
  span.imageLg {
    display: block;
    float: left;
    width: 34px;
    height: auto;
    margin-right: 0;
    max-width: 34px;
    text-align: left;
    img {
      width: 24px;
      height: auto;
    }
  }
  div.details {
    display: block;
    float: left;
    width: 260px;
  }
  span.editions {
    margin-top: 0;
    font-size: .6875em;
    color: @grey;
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

@media only screen and (min-width: @width-breakpoint-tablet) {
  .mybooks-list {
    flex: 1;
  }
}
